<template>
  <div class="index-main">

  <!--第一行-->
  <div class="im-block im-row">
   <div class="im-br-left">
   <div class="im-br-l-top">
     <div class="im-br-lt-block" v-for="(item,index) in 3" :key="index">
     <div class="im-br-lt-item">{{  index*1000 }}</div>
     </div>
   </div>
   <div class="im-br-l-bottom">
    <div ref="echartsView" class="echart-style"></div><!--直列图-->
   </div>
   </div>
   <div class="im-br-right">
   <uploadImages ref="uploadBox" :folder="'user'" @uploadData="uploadImageHandle"></uploadImages>
   <img :src="uploadBoxImg" width="100" height="100"/>
   </div>

  </div>
  
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,getCurrentInstance } from "vue";
const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

import uploadImages from '@/components/upload/upload_images.vue';

import * as echarts from "echarts";

const myChart = ref();
const option = ref({});
const echartsView = ref(null); //

onMounted(()=>{
  echartsInit();
  // getIndexData();//获取统计数据
})

//获取统计数据
// const getIndexData = () => {
//   $api.get("v1/login/get/get_data_index", {id:1,name:'sk'}).then((res) => {
//     console.log(res,"数据");
//   });
// };

//直列图
const echartsInit = () =>{
  myChart.value = echarts.init(echartsView.value);
  option.value = {
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
      }
    ]
  };
  myChart.value.setOption(option.value);
};

//上传
const uploadBox =ref(null);
const uploadBoxImg =ref(null);
const uploadImageHandle = (res) =>{
  // console.log(res,"图片")
  uploadBoxImg.value = res;
}

</script>
 

 
<style>
.index-main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.im-block{ 
  width: 100%;
  display: flex;
  align-items: center;
}
.im-column{
  flex-direction: column;
}
.im-row{
  flex-direction: row;
}

.im-br-left{
  flex: 2;
  display: flex;
  flex-direction: column;

  .im-br-l-top{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .im-br-lt-block{
      width: calc(33.3% - 20px);
      height: 150px;
      padding: 5px 10px;

      .im-br-lt-item{
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        background-color: aquamarine;
      }
    }
  }
  .im-br-l-bottom{
    width: 100%;
    height: 350px;

    .echart-style {
  width: 600px;
  height: 330px;
  background: skyblue;
}
  }
}
.im-br-right{
  width: 250px;
  padding:5px 10px;
  margin-left: 10px;
  margin-right: 10px;
  height: 500px;
  border-radius: 8px;
  background-color: bisque;
}
</style>